
export default {
    name: 'histogram-svg',
    props: {
        title: {
            type: String,
            default: '',
        },
        dataList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            width: 800,
            height: 400,
            lines: [50, 100, 150, 200],
            showDataList: [],
            rankData: 10,
        };
    },
    watch: {
        dataList(val) {
            this.showDataList = [];
            if (val && val instanceof Array) {
                this.getRankData(val);
                this.computeData(val);
            }
        },
    },
    computed: {
        lineWidth() {
            return this.width - 40;
        },
        // 柱状图标准线
        linesList() {
            const lines = [];
            const height = this.height;
            const delta = (height - 150) / 5;
            for (let index = 0; index < 6; index++) {
                lines.push(`M20 ${height-(50 + delta * index)} l${this.lineWidth} 0`);
            }
            return lines;
        },
    },
    methods: {
        handleHover(data, event) {
            console.log(data, event);
        },
        handleOut(data, event) {
            console.log(data, event);
        },
        // 获取数据比例
        getRankData(list) {
            const max = Math.max(...list.map(item => item.repayAmount));
            if (max > 10) {
                const len = String(max).length - 1;
                let firstInt = '1';
                for (let i = 0; i < len; i++) {
                    firstInt += '0';
                }
                firstInt = Number(firstInt);
                let firstNum = +String(max).substr(0, 1);
                if (max >= 100) {
                    const secondInt = firstInt / 10;
                    const secondNum = +String(max).substr(1, 1) + 1;
                    this.rankData = firstNum * firstInt + secondNum * secondInt;
                } else {
                    this.rankData = (firstNum + 1) * firstInt;
                }
            }
            // console.log(max);
        },
        // 数据转换
        computeData(list) {
            // collectionUserId 催收员id
            // collectionUserName 催收员姓名
            // repayAmount 回款金额
            // rankNo 排序序号
            const height = this.height;
            const areaHeight = height - 150;
            list.forEach((item, index) => {
                const data = Math.round((item.repayAmount / this.rankData) * areaHeight);
                let shotName = item.collectionUserName.split('@')[0];
                if (shotName.length > 8) {
                    shotName = `<tspan x="${65 + 70 * index}" y="${height - 30}">${shotName.substr(0, 8)}</tspan><tspan x="${65 + 70 * index}" y="${height - 10}">${shotName.substr(8)}</tspan>`
                }
                this.showDataList.push({
                    name: item.collectionUserName,
                    shotName,
                    data,
                    amount: item.repayAmount,
                    id: item.collectionUserId,
                    x: 50 + 70 * index,
                    y: height - 50 - data,
                })
            });
            this.width = 800; // 每次置为初始化宽度
            if (50 + 70 * list.length > this.width) {
                this.width = 50 + 70 * list.length;
            }
        },
    },
    created() {
        // const height = this.height;
        // const areaHeight = height - 150;
        // for (let index = 0; index < 10; index++) {
        //     const data = Math.round(Math.random() * areaHeight);
        //     this.dataList.push({
        //         name: 'cuishou'+ index,
        //         shotName: 'cuishou@pesopop'+index,
        //         data,
        //         y: height - 50 - data,
        //         x: 50 + 70 * index,
        //     });
        // }
    },
}
